<template>
	<!-- 页面模板 -->
	<div class="container">
		<!-- 头部信息 begin -->
			<div class="aui-header">
				<div class="aui-header-box clearfix">
					<div class="aui-header-logo">
						<a href="index.html">
							<img src="/static/themes/img/logo/logo.png" alt="">
						</a>
					</div>
					<div class="aui-header-sou">
						<a href="search.html">
							<span><i class="aui-iconfont aui-icon-search"></i></span>
						</a>
					</div>
				</div>
				<!-- 新闻分类 -->
				<div class="swiper-container swiper1 b-line">
					<div class="swiper-wrapper">
						 <!-- selected -->
						<div class="swiper-slide" :class="cateId==x.news_cid?'selected':''" @click="changeCate(x.news_cid)" v-for="x in newCate">{{x.news_cname}}</div>
					</div>
				</div>
			</div>
		<!-- 头部信息 end -->

		<!-- 内容信息 begin -->
			<div class="swiper-container swiper2" style="padding-top:85px; padding-bottom:49px;">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiper-no-swiping">
						
						<scroller :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
							<section class="aui-middle-dome" v-for="x in newList">
								<router-link :to="{name:'news_page',params:{id:x.news_id}}">
									<a href="javascript:;" data-action-label="click-a" data-tag="news" class="aui-middle-dome-a">
										<div class="aui-middle-dome-title">
											<h3>{{x.news_title}}</h3>
											<div class="aui-middle-dome-text">
												<div class="clearfix">
													<!-- <span class="aui-top box-line">置顶</span> -->
													<span class="aui-title">{{x.news_time | formatDate}}</span>
													<span class="aui-comment">已阅读 {{x.news_reads}}</span>
												</div>
											</div>
										</div>
										<div class="aui-middle-dome-img">
											<img :src="x.news_pic" alt="">
										</div>
									</a>
								</router-link>
							</section>
						</scroller>

					</div>
				</div>
			</div>
		<!-- 内容信息 end -->
	</div>
</template>

<script>
	export default{
		name:'home',
		components:{},	// 再加 子组件
		// 方法
		created(){	//组件已创建 属性已绑定 DOM文档内容还未生成时所触发
			// 很早就会触发的（提前获取到数据）
			this.$store.dispatch('acNewCate')
			// this.$store.dispatch('acNewList',6)  // 第2个参数是 新闻分类ID
		},
		// created:function(){

		// }
		mounted(){	// 在DOM文档渲染结束后执行的，也就是再这里去植入插件代码
			
			// 脚本
		},
		// 计算属性
		computed:{	// 更改数据的值（变量的值）
			// 这里是通过函数的形式，给变量newCate赋值，函数里面就要写return
			// newCate(){	// news 对应中间件  news.js
			// 	return this.$store.state.news.newCate
			// }
			newCate:function(){
				// 函数返回结果
				return this.$store.state.news.newCate
			},
			newList:function(){
				// 函数返回结果
				return this.$store.state.news.newList
			},
			cateId(){
				return this.$store.state.news.cid
			}
		},
		methods:{
			// 写事件函数
			changeCate(cid){	// 切换分类，列表的数据要更换

				this.$refs.my_scroller.finishInfinite(false);	//上拉获取数据可以重新调用

				this.$store.commit('munewEmpty')
				this.$store.dispatch('acPn',1);	// 页码改为：1
				this.$store.commit('mucate',cid)	// 改变分类cid
			},
			/**
		     * 下拉刷新
		     */
		    refresh(done) {
		      	// 要默认第1页
		      	// 刷新页面
		   		this.$store.dispatch('acPn',1);
		   		this.$store.commit('munewEmpty');
		   		done(true);  //阻止循环调用
        		return;
		    },

		    /**
		     * 上拉获取下一页的数据（会自动调用）
		     */
		    infinite(done) {
		      // 页码要加一
		      setTimeout(()=>{
				var pn = this.$store.state.news.pn;
				var cid = this.$store.state.news.cid;

				// 每次上拉加载，获取下一页的数据
				this.$store.dispatch('acNewList',cid)

				this.$store.dispatch('acPn',++pn);	// 页码+1

				done(true);  //阻止循环调用
        		return;
		      },1000)
		    },
		},
		// 这里可以监听变量是否改变
		watch:{
			newCate(){
				this.$nextTick(function(){
					// 这里监听到变量的值改变了，在这里执行插件
					function setCurrentSlide(ele, index) {
			            $(".swiper1 .swiper-slide").removeClass("selected");
			            ele.addClass("selected");
			        }
					var swiper1 = new Swiper('.swiper1',{
			            slidesPerView: 5.5,
			            paginationClickable: true,
			            spaceBetween: 1,
			            freeMode: true,
			            loop: false,
			            onTab: function(swiper) {
			                var n = swiper1.clickedIndex;
			            }
			        });
			        swiper1.slides.each(function(index, val) {
			            var ele = $(this);
			            ele.on("click", function() {
			                setCurrentSlide(ele, index);
			                // swiper2.slideTo(index, 500, false);
			            });
			        });
			        var swiper2 = new Swiper('.swiper2',{
			            direction: 'horizontal',
			            loop: false,
			            //					effect : 'fade',//淡入
			            //effect : 'cube',//方块
			            //effect : 'coverflow',//3D流
			            //					effect : 'flip',//3D翻转
			            autoHeight: true,
			            onSlideChangeEnd: function(swiper) {
			                //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
			                var n = swiper.activeIndex;
			                setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
			                swiper1.slideTo(n, 500, false);
			            }
			        });
				});
			}
		},
		// 数据筛选，比如转换时间格式
		filters:{
			formatDate: function (value) {
				let date = new Date(value*1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
			}
		}
	}
</script>

<style>
	/*内部样式*/

</style>